<template>
  <div>
    <basePage>
      <el-card>
        <el-row>
          <el-col>
            <el-button type="primary" @click="showCreateDialog">添加权限</el-button>
          </el-col>
        </el-row>
        <!-- 数据展示 -->
        <el-table :data="permissionList" border stripe>
          <el-table-column label="权限ID" prop="id" width="70"></el-table-column>
          <el-table-column label="前端路由" prop="path" show-overflow-tooltip></el-table-column>
          <el-table-column label="路径名称" prop="route_name"></el-table-column>
          <el-table-column label="菜单名称" prop="title"></el-table-column>
          <el-table-column label="接口地址" prop="url" show-overflow-tooltip></el-table-column>
          <el-table-column label="上级ID" prop="parent_id" width="70"></el-table-column>
          <el-table-column label="排序" prop="sort" width="70"></el-table-column>
          <el-table-column label="菜单类型" width="80">
            <template scope="scope">
              <el-tag type="primary" effect="dark" v-if="scope.row.type === 'D'">目录</el-tag>
              <el-tag type="warning" effect="dark" v-else-if="scope.row.type === 'M'">菜单</el-tag>
              <el-tag type="success" effect="dark" v-else-if="scope.row.type === 'P'">公共</el-tag>
              <el-tag type="danger" effect="dark" v-else>按钮</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="权限状态" width="80">
            <template scope="scope">
              <el-switch active-color="#ff4949" v-model="scope.row.status"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="showEditDialog(scope.row.id)"
              ></el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="removePermission(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
      <!-- 新建或编辑权限对话框 -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="permissionDialogVisible"
        @close="handleDialogClose"
        width="30%"
      >
        <el-form
          :model="permissionInfo"
          :rules="permissionInfoRules"
          ref="permissionInfoRef"
          label-width="100px"
        >
          <el-form-item label="上级ID" prop="parent_id">
            <!-- 下拉树插件 -->
            <tree-select
              :data="permissionTree"
              v-model="permissionInfo.parent_id"
              :props="defaultProps"
              placeholder="请选择上级ID"
              clearable
              filterable
              highlight-current
              default-expand-all
              ref='elTreeSelect'
            ></tree-select>
          </el-form-item>
          <el-form-item label="前端路由" prop="path">
            <el-input v-model="permissionInfo.path" placeholder="请输入前端路由"></el-input>
          </el-form-item>
          <el-form-item label="路径名称" prop="route_name">
            <el-input v-model="permissionInfo.route_name" placeholder="请输入路径名称"></el-input>
          </el-form-item>
          <el-form-item label="权限序号" prop="sort">
            <el-input-number
              v-model="permissionInfo.sort"
              :min="0"
              placeholder="请输入权限序号"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="菜单名称" prop="title">
            <el-input v-model="permissionInfo.title" placeholder="请输入菜单名称"></el-input>
          </el-form-item>
          <el-form-item label="接口地址" prop="url">
            <el-input v-model="permissionInfo.url" placeholder="请输入接口地址"></el-input>
          </el-form-item>
          <el-form-item label="菜单类型" prop="type">
            <el-select v-model="permissionInfo.type" placeholder="请选择菜单类型">
              <el-option
                v-for="item in menuType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="permissionDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="createOrUpdatePermission">确 定</el-button>
        </span>
      </el-dialog>
    </basePage>
  </div>
</template>
<script>
export default {
  data() {
    return {
      permissionList: [],
      permissionDialogVisible: false,
      permissionInfo: {
        sort: 0
      },
      permissionInfoRules: {
        path: [
          { required: true, message: '请输入前端路由', trigger: 'blur' },
          { max: 100, message: '长度不能超过100个字符', trigger: 'blur' }
        ],
        route_name: [
          { required: true, message: '请输入路径名称', trigger: 'blur' },
          { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
          { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入接口地址', trigger: 'blur' },
          { max: 100, message: '长度不能超过100个字符', trigger: 'blur' }
        ],
        parent_id: [{ required: true, message: '请输入上级ID', trigger: 'change', type: 'number' }],
        type: [{ required: true, message: '请输入菜单类型', trigger: 'change', type: 'string' }],
        sort: [{ required: true, message: '请输入权限序号', trigger: 'blur' }]
      },
      menuType: [
        {
          value: 'D',
          label: '目录'
        },
        {
          value: 'M',
          label: '菜单'
        },
        {
          value: 'B',
          label: '按钮'
        },
        {
          value: 'P',
          label: '公共权限'
        }
      ],
      allPermisList: [],
      dialogTitle: '',
      createPermission: null,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      defaultProps: {
        children: 'children',
        label: 'title',
        value: 'id'
      },
      permissionTree: []
    }
  },
  created() {
    this.getPermissionlist()
  },
  methods: {
    // 获取权限列表
    getPermissionlist() {
      this.$http
        .get(`/sys/permission/list?pageSize=${this.pageSize}&pageNum=${this.pageNum}`)
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.permissionList = resData.data.list
            this.total = resData.data.count
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    // 显示添加权限对话框
    showCreateDialog() {
      this.dialogTitle = '添加权限'
      this.createPermission = true
      this.getPermissionTree()
      // this.getParentList()
      this.permissionDialogVisible = true
    },

    // 获取父级id
    // getParentList() {
    //   this.parentList.push({ id: 0, title: '无' })
    //   this.parentList.push({ id: -1, title: '公共权限' })
    //   this.$http
    //     .get('/sys/permission/list')
    //     .then(res => {
    //       const resData = res.data
    //       if (resData.code === 200) {
    //         resData.data.list.forEach(permission => {
    //           this.parentList.push({
    //             id: permission.id,
    //             title: permission.title
    //           })
    //         })
    //       } else {
    //         return this.$message.error(resData.msg)
    //       }
    //     })
    //     .catch(err => {
    //       return this.$message.error(err)
    //     })
    // },

    // 添加或编辑权限
    createOrUpdatePermission() {
      this.$refs.permissionInfoRef.validate(valid => {
        if (valid) {
          // 添加权限
          if (this.createPermission) {
            this.$http
              .post('/sys/permission/create', this.permissionInfo)
              .then(res => {
                const resData = res.data
                if (resData.code === 200) {
                  this.getPermissionlist()
                  this.permissionDialogVisible = false
                  this.$message.success(resData.msg)
                } else {
                  return this.$message.error(resData.msg)
                }
              })
              .catch(err => {
                return this.$message.error(err)
              })
          } else {
            // 编辑权限
            this.$http
              .post('/sys/permission/update', this.permissionInfo)
              .then(res => {
                const resData = res.data
                if (resData.code === 200) {
                  this.getPermissionlist()
                  this.permissionDialogVisible = false
                  this.$message.success(resData.msg)
                } else {
                  return this.$message.error(resData.msg)
                }
              })
              .catch(err => {
                return this.$message.error(err)
              })
          }
        }
      })
    },
    // 获取权限tree
    getPermissionTree() {
      this.$http
        .get('/sys/permission/permTree')
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.permissionTree = resData.data.list
            this.permissionTree.unshift({ id: 0, title: '无' }, { id: -1, title: '公共权限' })
            // console.log(this.permissionTree)
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    // 显示编辑权限对话框
    showEditDialog(id) {
      this.dialogTitle = '编辑权限'
      this.createPermission = false
      this.getPermissionTree()

      this.$http
        .get(`/sys/permission/getById?id=${id}`)
        .then(res => {
          const resData = res.data
          if (resData.code === 200) {
            this.permissionInfo = resData.data[0]
            this.permissionDialogVisible = true
          } else {
            return this.$message.error(resData.msg)
          }
        })
        .catch(err => {
          return this.$message.error(err)
        })
    },
    // 删除权限
    removePermission(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http
            .post('/sys/permission/delete', { id: id })
            .then(res => {
              const resData = res.data
              if (resData.code === 200) {
                this.getPermissionlist()
                this.$message.success(resData.msg)
              } else {
                return this.$message.error(resData.msg)
              }
            })
            .catch(err => {
              return this.$message.error(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 管理弹窗处理
    handleDialogClose() {
      this.permissionTree = []
      this.permissionInfo = {}
      this.permissionInfo = { sort: 0 }
      this.$refs.permissionInfoRef.resetFields()
    },
    // 改变每页显示数据
    handleSizeChange(val) {
      this.pageSize = val
      this.getPermissionlist()
    },
    // 改变当前页码
    handleCurrentChange(val) {
      this.pageNum = val
      this.getPermissionlist()
    }
  }
}
</script>

<style lang="less" scoped>
@import './Permission.less';
</style>
